<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式</title>
</head>
<body>
  <script>
    /*
      修改对象的方法
      object.defineProperty()
      Refelect.defineProperty()
    */
    let persion = {
      name: 'lisi',
      age: 18
    }
    // let p = {}

    // 模拟 vue2 实现响应式
    // Object.defineProperty(p,'name',{
    //   get() {
    //     return persion.name
    //   },
    //   set(value) {
    //     console.log(value);
    //     // 处理响应式
    //     p.name = value
    //   },
    // })
    // Object.defineProperty(p,'age',{
    //   get() {
    //     return persion.age
    //   },
    //   set(value) {
    //     console.log(value);
    //     // 处理响应式
    //     p.age = value
    //   },
    // })
  
    /*
      模拟 vue3 实现响应式，通过 Proxy（代理） & Reflect（反射）
        Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
        Reflect（反射）: 对源对象的属性进行操作。
    */ 
    const p = new Proxy(persion,{
      // 读取 代理对象属性时调用
      get(target,propName) {
        // return persion[propName]
        Reflect.get(target,propName)
      },
      // 修改/新增 代理对象属性时调用
      set(target,propName,value) {
        // persion[propName] = value
        Reflect.set(target,propName,value)
      },
      // 删除 代理对象属性时调用
      deleteProperty(target,propName) {
        // return delete persion[propName]
        return Reflect.deleteProperty(target,propName)
      }
    })
  </script>
</body>
</html>


